<!--
  有个注意的地方就是Key必须是一样的，这样才能保证Layout组件不会被重新加载，
  这防止标签列表丢失，如果需要Layout重载，你可能需要vuex来存在tags
  而且防止路由切换不会出现渐进渐出效果
-->
<template>
  <router-view v-slot="{ Component }">
    <transition mode="out-in" name="fade-slide">
      <keep-alive :include="cacheViews">
        <component :is="Component" :key="activePath" />
      </keep-alive>
    </transition>
  </router-view>
</template>
<script>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
export default {
  name: 'AppRouterView',
  setup() {
    const store = useStore()
    const route = useRoute()
    const activePath = computed(() => route.path)
    const cacheViews = computed(() => store.getters.cacheViews)

    return {
      activePath,
      cacheViews
    }
  }
}
</script>
